<template id="set-red-paper">
    <div v-if="coupon">
        <div class="order-container bg-fff f30 border-bottom">
            <i class="tip"></i>
            <span>优惠信息</span>
        </div>
        <div class="order-container bg-fff f30 border-bottom mb-20">
            <a @click="openList()">
                <span>5173红包</span>
                <div class="redbags fr">
                    <!--无可用-->
                    <span v-show="paperInfo.length==0&&!selected">无可用</span>
                    <!--有红包-->
                    <span class="packet" v-show="paperInfo.length>0&&!selected">{{paperInfo.length}}个红包</span>
                    <!--使用红包-->
                    <span class="packet" v-show="selected">使用红包</span>
                    <span class="ml-15" v-show="selected">-￥{{selected.CouponValue}}</span>
                </div>
            </a>
        </div>
        <aside class="ConBox" v-if="listShow">
            <div id="wrapper">
                <div class="top-header border-bottom app-header" :class="getPlantClass()">
                    <div class="top-back"><a @click="openList()"></a></div>
                    <h2 class="f36 ">5173红包</h2>
                    <div class="top-right"><a @click="clickInfo()" class="f30 color-999">使用说明</a></div>
                </div>
                <div class="htredag-mian pb-100">
                    <div class="htdag-titl bg-fff border-bottom">
                        <ul>
                            <li :class="this.coupon_usability=='0'?'active':''" @click="change('0')"><a >可用红包（{{paperInfo.length}}）</a></li>
                            <li :class="this.coupon_usability=='1'?'active':''" @click="change('1')"><a>不可用红包（{{unpaperInfo.length}}）</a></li>
                        </ul>
                    </div>
                    <a ><div class="htdag-plain px-30 f24"  v-if="plain_colse">
                        <i class="plain-colse fl" @click="closePlain()"></i>
                        <span class="p-close fl"  @click="clickAble()">以下使用条件均为商品金额，非订单金额</span><em class="p-right fr" @click="clickAble()">查看说明</em></div></a>

                    <div class="availability-01" v-if="this.coupon_usability=='0'">
                        <div class="terinanition text-center" v-if="paperInfo.length==0">
                            <i class="itno"></i>
                            <p class="f24 color-999">抱歉，暂无该类红包</p>
                        </div>
                        <div class="dbgteen-dbcon mt-20" v-if="paperInfo.length>0">
                            <div class="dbgtee-blist border mx-30 mb-20" @click="select(item)"  v-for="item in paperInfo">
                                <div class="sgbst-lpoer fl">
                                    <div class="appico "></div>
                                    <div class="appicotext f22 color-fff ">{{getTerminalModes(item.UseableTerminalModeList)}}</div>
                                    <h2 class="font-arial f36 color-m1 text-center">¥<i class="fontbold mx-10">{{item.CouponValue}}</i></h2>
                                    <p class="color-m1 text-center f22">满{{item.MinExpentiure}}元可用</p>
                                </div>
                                <div class="sgbst-center"></div>
                                <div class="sgbst-rlker fr p-20 pt-30 ">
                                    <div class="sbrk-titl f26 color-333"><i class="ico_z text-center color-fff f24 mr-15">{{getBizOfferTypes(item.BizOfferTypeList)}}</i>{{getGame(item.GameList,item.BizOfferTypeList)}}</div>
                                    <div class="sbrk-tran f24 color-666">{{getServiceTypes(item.TradingTypeList )}}</div>
                                    <div class="sbrk-tnbtn f20 color-999">{{getTime(item.ValidStartDate,item.ValidEndDate)}}</div>
                                    <div  class="sbrk-vhoice" v-if="selected!=item"></div>
                                    <div  class="sbrk-vhoice-active"  v-if="selected==item"></div>
                                </div>
                            </div>
                        </div>
                        <div class="htdag-bortn fixed-bottom"><a class="color-fff text-center f32" @click="getPaperItem()">确定</a></div>
                    </div>
                    <div class="availability-02" v-if="this.coupon_usability=='1'">
                        <div class="terinanition text-center" v-if="unpaperInfo.length==0">
                            <i class="itno"></i>
                            <p class="f24 color-999">抱歉，暂无该类红包</p>
                        </div>
                        <div class="dbgteen-dbcon mt-20" v-if="unpaperInfo.length>0">
                            <div class="dbgtee-blist border mx-30 mb-20 nodbgtee-blist" v-for="item in unpaperInfo">
                                <div class="sgbst-lpoer fl">
                                    <div class="appico "></div>
                                    <div class="appicotext f22 color-fff ">{{getTerminalModes(item.UseableTerminalModeList)}}</div>
                                    <h2 class="font-arial f36 color-000 text-center">¥<i class="fontbold mx-10">{{item.CouponValue}}</i></h2>
                                    <p class="color-333 text-center f22">满{{item.MinExpentiure}}元可用</p>
                                </div>
                                <div class="sgbst-center"></div>
                                <div class="sgbst-rlker fr p-20 pt-30 ">
                                    <div class="sbrk-titl f26 color-333"><i class="ico_z bg-66 text-center color-fff f24 mr-15">{{getBizOfferTypes(item.BizOfferTypeList)}}</i>{{getGame(item.GameList,item.BizOfferTypeList)}}</div>
                                    <div class="sbrk-tran f24 color-666">{{getServiceTypes(item.TradingTypeList )}}</div>
                                    <div class="sbrk-tnbtn f20 color-999">{{getTime(item.ValidStartDate,item.ValidEndDate)}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!--弹窗-->
                <div class="message" v-if="info">
                    <div class="custom-father">
                        <div class="dialog-box" id="pop_htredag01">
                            <div class="dialog-main">
                                <div class="frsingle">
                                    <h2 class="f36 color-000">使用说明</h2>
                                    <p class="f30 color-000">
                                        1、下单商品金额必须满足红包使用门槛，而非订单金额<br>
                                        2、一笔订单只能使用一个红包，且只能在有效期内使用<br>
                                        3、订单取消后，红包自动返还至您的帐户，未过期可继续使用<br>
                                        4、由于部分商品不支持红包，所以达到红包门槛时仍无法使用红包。若要使用红包，请更换商品<br>
                                        5、2.7.0及以上版本才可使用红包，若未升级请及时更新
                                    </p>

                                </div>
                                <div class="dialog-foot">
                                    <a class="dialog_close f36" @click="clickInfo()">朕知道了</a>
                                </div>
                            </div>
                        </div>
                        <div  class="dialog_cover"></div>
                    </div>
                </div>
                <div class="message" v-if="unable">
                    <div class="custom-father">
                        <div class="dialog-box">
                            <div class="dialog-main">
                                <div class="frsingle">
                                    <h2 class="f36 color-000">如有以下任意情况，红包即不可使用</h2>
                                    <p class="f30 color-000">
                                        1、所购买的商品金额不满足红包使用门槛<br>
                                        2、所结算商品不符合红包限定游戏及类目范围<br>
                                        3、所结算商品不符合红包交易方式<br>
                                        4、不在红包有效期范围内
                                    </p></div>
                                <div class="dialog-foot">
                                    <a class="dialog_close f36" @click="clickAble()">朕知道了</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div  class="dialog_cover"></div>
                </div>

            </div>
        </aside>
    </div>
</template>

<script>
	import {mapState, mapGetters, mapActions} from 'vuex'
	export default {
		template: '#set-red-paper',
		props: ['goodsEO','getPaperInfo'],
		data() {
			return {
				coupon:false,
				coupon_usability:'0',
				listShow:false,
				plain_colse:true,
				selected:'',
                info:false,
                unable:false,
                plant:'',
				paperInfo:[],
				unpaperInfo:[],
			}
		},
		mounted: function () {
			var self = this;
			if (this.$isAndroid) {
				self.plant = 'android'
			} else if(this.$isiOS) {
				self.plant = 'ios'
			}
			var trading_type = '47'
			if(!self.goodsEO.id){
				trading_type = '42'
			}
			self.$http.post(self.$CONSTANTS.APISearchCenter + 'OnoffService/selectOnoff', {"mapRequest": {"type": "红包开关"}})
				.then((res) => {
					var data = res.body;
					if(data.success&&data.result.status){
						self.coupon = true
						var params1 = {"coupon_usability":'0',"total_fee":self.goodsEO.price+'',"sub_commission_fee":'',"game_id":self.goodsEO.gameId,"bizoffertype_id":self.goodsEO.goodsType+'',"terminal_mode":"2","trading_type":trading_type}
						var promise1 = self.getMyPaper(params1)
						promise1.then(function (data) {
							self.paperInfo = data
							if(self.paperInfo.length>0){
								self.selected = self.paperInfo[self.paperInfo.length-1]
								self.$emit('getPaperInfo', {"couponValue":self.selected.CouponValue,
									"couponNo":self.selected.CouponNo,
									"bizOfferTypeId":self.goodsEO.goodsType+'',
									"couponTradingType":trading_type,
									"terminalMode":"2"})
							}
						})
						var params2 = {"coupon_usability":'4',"total_fee":self.goodsEO.price+'',"sub_commission_fee":'',"game_id":self.goodsEO.gameId,"bizoffertype_id":self.goodsEO.goodsType+'',"terminal_mode":"2","trading_type":trading_type}
						var promise2 = self.getMyPaper(params2)
						promise2.then(function (data) {
							self.unpaperInfo = data
						})
					}
				})
				.catch(function (res) {
					console.log(res)
				});
		},
		methods: {
			closePlain:function () {
                this.plain_colse = false
			},
			getPlantClass:function () {
				var strClass =''
                if(this.plant=='ios'){
	                strClass = 'bg-ios'
                }else if(this.plant=='android'){
	                strClass = 'bg-android'
                }
				return strClass
			},
			select:function (CouponNo) {
                if(this.selected==CouponNo){
	                this.selected =''
                }else {
	                this.selected = CouponNo
                }
			},
			clickInfo:function () {
				this.info = !this.info
			},
			clickAble:function () {
				this.unable = !this.unable
			},
			getPaperItem(){
				var self = this;
				self.listShow = false
				var trading_type = '47'
				if(!self.goodsEO.id){
					trading_type = '42'
				}
				self.$emit('getPaperInfo', {"couponValue":self.selected.CouponValue,
					"couponNo":self.selected.CouponNo,
					"bizOfferTypeId":self.goodsEO.goodsType+'',
					"couponTradingType":trading_type,
					"terminalMode":"2"})
				if (this.$isAndroid) {
					window.android.showNavigation('');
				} else if (this.$isiOS) {
					window.webkit.messageHandlers.showNavigation.postMessage('');
				}
            },
			openList:function(){
				this.listShow = !this.listShow
				if (this.$isAndroid&&this.listShow) {
					window.android.hidenNavigation('');
				} else if (this.$isiOS&&this.listShow) {
					window.webkit.messageHandlers.hidenNavigation.postMessage('');
				}
				if (this.$isAndroid&&!this.listShow) {
					window.android.showNavigation('');
				} else if (this.$isiOS&&!this.listShow) {
					window.webkit.messageHandlers.showNavigation.postMessage('');
				}
			},
			change(coupon_usability){
                this.coupon_usability = coupon_usability
            },
			getPaperMoney:function (goodsEO) {
				var str = ""
				if(goodsEO){
					this.paperInfo.forEach(function (paper) {
						if(goodsEO.price>=paper.MinMoney){
							str = '立减'+paper.CouponValue+'元'
						}
					})
				}
				return str
			},
			getTerminalModes(UseableTerminalModes){
				var str = '全站通用'
				var modesMap = {
					0:'电脑版',1:'触屏版',2:'APP'
				}
				if(UseableTerminalModes){
					var list = UseableTerminalModes.split(',')
					if(list.length<3){
						var temp =[]
						list.forEach(function (item) {
							temp.push(modesMap[item])
						})
						str =  temp.join('\\') + '专享'
					}
				}
				return str
			},
			getGame(UseableGameList,UseableBizOfferTypes ){
				var str = '限购部分游戏帐号类商品'
				var getBizOfferTypes = this.getBizOfferTypes(UseableBizOfferTypes,true)
				if(getBizOfferTypes!='全部商品类型'){
					getBizOfferTypes = getBizOfferTypes +'类商品'
				}
				if(UseableGameList){
					if(UseableGameList.split(',').length==1){
						str = '限购'+this.goodsEO.gameName+getBizOfferTypes
					}
				}else {
					str = '支持全部游戏'+getBizOfferTypes
				}
				return str
			},
			getBizOfferTypes  (UseableBizOfferTypes,all){
				var str = '通用'
				if(all){
					str = '全部商品类型'
				}
				var modesMap = {
					0:'装备',1:'游戏币',2:'帐号',3:'代练',
					4:'包裹',5:'点卡',6:'网店',7:'密保卡',
					8:'激活码',9:'手机充值卡',10:'其他',11:'元宝类',
					12:'互换'
				}
				if(UseableBizOfferTypes){
					var list = UseableBizOfferTypes.split(',')
					if(list.length<13){
						var temp =[]
						list.forEach(function (item) {
							temp.push(modesMap[item])
						})
						str =  temp.join(',')
					}
				}
				return str
			},
			getServiceTypes  (UseableTradingServiceTypes){
				var str = '支持所有交易方式'
				var modesMap = {
					0:'自助',1:'担保',2:'寄售',3:'API`',
					4:'点卡类',5:'帐号',6:'商城',7:'消费券',
					8:'工具',9:'代练',10:'未定义',11:'51淘',
					12:'施乐会',13:'7宝',14:'658',15:'活动',
					16:'赠金',17:'消息中心',18:'台服085',19:'173库存系统',
					20:'平放开台',21:'积分频道',22:"彩票",23:'点卡商城',
					24:'平放开台',25:'积分频道',26:"5173助理",27:'9517 B2B',
					28:'帐号租赁',29:'手游交易',30:"直通车",31:'打赏',
					32:'视频真人秀',33:'卖家保险',34:"网页游戏开服表",35:'点卡换金',
					36:'点卡保险',37:'点卡竞价',38:"金牌掌柜",39:'658金融网',
					40:'(游戏币)金币商城',41:'高尔夫',42:"手游",43:'游戏币回购',
					44:'巨人合作金币',45:'退游宝',46:"金钻",47:'触屏版M站',
					48:'饰品交易'
				}
				if(UseableTradingServiceTypes){
					var list = UseableTradingServiceTypes.split(',')
					if(list.length<13){
						var temp =[]
						list.forEach(function (item) {
							temp.push(modesMap[item])
						})
						str =  temp.join(',')+'商品交易'
					}
				}
				return str
			},
			getTime(UseableFrom,UseableTo,EffectiveNum){
				var str = ''
				if(UseableFrom){
					UseableFrom=UseableFrom.replace(/^(\d{4})(\d{2})(\d{2})$/, "$1.$2.$3")
					UseableTo=UseableTo.replace(/^(\d{4})(\d{2})(\d{2})$/, "$1.$2.$3")
					str = UseableFrom + "-"+ UseableTo
				}else{
//                	var nowDate = new Date();
//                	var endTime = new Date(EffectiveNum*24*60*60*1000+nowDate.getTime())
//	                str = nowDate.getFullYear()+'.'+(nowDate.getMonth()+1)+'.'+nowDate.getDate()+'-'+endTime.getFullYear()+'.'+(endTime.getMonth()+1)+'.'+endTime.getDate()
					str = '领取后'+EffectiveNum+'天内有效'
				}
				return str
			},
			...mapActions({
				getMyPaper: 'account/GET_MYPAPER',
			})
		}
	}
</script>
<style src="css/common/publish-cl.css"></style>
<style scoped>
    .bg-android{
        background-color: #FF6600;
        color:#fff;
    }
    .bg-android .color-999{
        color:#fff;
    }
    .bg-ios{
        background-color: #f1f1f6;
    }
    .order-container .redbags span.packet{
        margin-bottom: 0.10rem;
        margin-top:0.13rem;
    }
    .fixed-top{
        top:0 !important;
        left: 0;
    }
    .ConBox{
        margin: 0;
        left: 0;
        z-index: 999;
        position: fixed;
        overflow: hidden;
        height: 100%;
        background: #f1f1f1;
    }
    .ConBox .Jbox{
        width: 100%;
        background: #f1f1f1;
        overflow: scroll;
        height: 100vh;
        top:0;
        z-index: 20;
        padding-bottom: 2rem;
    }
    .message {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        z-index: 99;
        top: 0;
    }
    .custom-father {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        height: auto;
        max-height: 8rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .dialog_cover {
        position: fixed;
        _position: absolute;
        left: 0;
        top: 0;
        display: block;
        z-index: -1;
        width: 100%;
        height: 100%;
        filter: alpha(opacity=70);
        opacity: .7;
        background: #000;
    }
    .htredag-mian .dbgteen-dbcon {
        height: 70vh;
    }
    .ConBox{
        max-width: 100%;

    }
    .htredag-mian .availability-02 .dbgteen-dbcon {
        height: 80vh;
    }
    .bg-android .top-back a{background: url("~images/appleft.png") .3rem center no-repeat; background-size: .21rem}
    .dbgteen-dbcon .dbgtee-blist .sgbst-rlker .sbrk-tran {
        max-width: 3.5rem;
    }
    @media screen and (min-width: 310px) and (max-width: 370px){
        .htredag-mian .dbgteen-dbcon {
            height: 65vh;
        }
    }

</style>